<template>
  <div class="content">
    <!--   资产卡片-->
    <el-dialog
      v-dialogDrag
      :title="$t('market.cardList')"
      model
      :visible.sync="isclientlDialog"
      :close-on-click-modal="false"
      width="60%"
      top="5vh"
      :before-close="handleClose"
    >
      <div class="materiel-form">
        <search
          :options="selectData"
          :search-son="searchSon"
          :msg="tacitly"
          @seek="collect"
          @hand="clientSearch"
        />
        <el-button class="btn" size="mini" type="primary" @click="clientSearch">{{ $t('btn.search') }}</el-button>
      </div>
      <div style="margin-top: 15px">
        <jc-table
          :table-data="clientlDialogData"
          :table-header="clientDialogHeader"
          table-height="53vh"
          serial
          @clickRow="clientlSelectRow"
        >
          <!--审核状态-->
          <template v-slot:btnState="clo">
            <span v-if="clo.scope.row.fdocumentstatus === ''" />
            <el-tag v-else :type="clo.scope.row.stateColor">{{ clo.scope.row.fdocumentstatus }}</el-tag>
          </template>
          <template v-slot:billSlot="col">
            <el-tag v-if="col.scope.row.isinit === '1'" type="primary">{{ $t('market.yes') }}</el-tag>
            <el-tag v-else type="danger">{{ $t('market.no') }}</el-tag>
          </template>
        </jc-table>
        <jc-pagination
          v-show="client.total > 0"
          :total="client.total"
          :page.sync="client.pageNum"
          :limit.sync="client.pageSize"
          @pagination="queryTBdCustomerList"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { queryAssetsList } from '@/api/financial/assets'
import search from '@/components/Search'
import searData from '@/components/Search/mixin'

export default {
  components: {
    search
  },
  mixins: [searData],
  data() {
    return {
      // 责任部门列表数据分页
      isclientlDialog: true,
      ftype: 59,
      client: {
        total: 0, // 总条目
        pageNum: 1, // 当前页
        pageSize: 200, // 每页显示多少条数据
        fassetsname: ''
        // fuseOrgId: this.msg || ''
      },
      clientlDialogData: [],
      clientDialogHeader: [
        { label: this.$t('market.assetstype'), prop: 'fassetstypename', width: '100' },
        { label: this.$t('market.cardNumber'), prop: 'fbillno', width: '140' },
        { label: this.$t('market.assetsname'), prop: 'fassetsname', width: '120' },
        { label: this.$t('market.measuring'), prop: 'funitname', width: '200' },
        { label: this.$t('market.assetQty'), prop: 'fassetsamount', width: '80', align: 'right' },
        { label: this.$t('market.stareData'), prop: 'fusestartdate', align: 'right', width: '80' },
        { label: this.$t('market.assetsnum'), prop: 'fassetsbillno' },
        { label: this.$t('market.barcode1'), prop: 'fbarcode' },
        { label: this.$t('market.specify'), prop: 'fmodel' },
        { label: this.$t('market.areaname'), prop: 'fareaname', width: '80' },
        { label: this.$t('market.stockamount'), prop: 'fstockamount', align: 'right', width: '80' },
        { label: this.$t('market.receiveamount'), prop: 'freceiveamount', align: 'right', width: '80' },
        { label: this.$t('market.initialize'), type: 'bill', prop: 'isinit' }
      ],
      prodValue: {}
    }
  },
  created() {
    this.queryTBdCustomerList()
  },
  methods: {
    // 获取资产卡片列表
    async queryTBdCustomerList(ev) {
      this.isclientlDialog = true
      this.details = []
      if (ev && !ev.page) {
        this.details = ev
      }
      const DATA = {
        ...this.client,
        search: this.searCollData.concat(this.details)
      }
      const { data: RES } = await queryAssetsList(DATA)
      this.clientlDialogData = RES.list
      this.client.total = RES.total
    },
    // 资产卡片弹窗选中
    clientlSelectRow(item) {
      this.prodValue = item
      this.$emit('assets', this.prodValue)
    },
    clientSearch(ev) {
      this.client.pageNum = 1
      if (ev && ev.fname) {
        this.searchSon = ev.detail
        this.queryTBdCustomerList(ev.detail)
      } else {
        this.queryTBdCustomerList()
      }
    },
    // 关闭前回调
    handleClose() {
      this.$emit('assets', this.prodValue)
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  @include listBom;
  .materiel-form {
    position: relative;
    .btn {
      margin-left: 450px;
      transform: translateY(20%);
    }
  }
}
</style>
